import React, {PureComponent} from 'react';
import {NavBar, Icon, WingBlank, WhiteSpace, Card, Calendar} from 'antd-mobile';
import {getLessons} from '../../service/api'
import styles from './index.module.less'

const moment = require('moment');

const now = new Date();

export default class Lesson extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            lessonList: [],
            dateSelectorVisible: false,
            startDate: new Date(),
            endDate: moment(new Date()).add(7, 'd'),
            isEmpty: false,
        }
    }


    componentDidMount() {
        this.getLessonData();
    }

    /**
     * 获得数据
     */
    getLessonData = () => {
        const {history} = this.props;
        const { startDate, endDate } = this.state;
        const studentId = new URLSearchParams(history.location.search).get("studentId");
        getLessons({studentId, startDate, endDate}).then(res => {
            if (res.status === 0) {
                this.setState({
                    lessonList: res.data.list || [],
                })
            }
        }).catch(err => {
        })
    }

    /**
     * 获得学科名称
     */
    getSubjectName = (subject) => {
        switch (subject) {
            case 1:
                return '数学';
            case 2:
                return '语文';
            case 3:
                return '英语';
            case 4:
                return '物理';
            case 5:
                return '化学';
            case 6:
                return '生物';
            case 7:
                return '地理';
            case 8:
                return '历史';
            case 9:
                return '政治';
            default:
                return '其他';
        }
    }

    /**
     * 选择时间
     */
    onSelectDate =() => {
        this.setState({
            dateSelectorVisible:true,
        }, this.getLessonData)
    }

    /**
     * 确认选择的时间
     */
    onConfirmDate = (startDate, endDate) => {
        this.setState({
            startDate,
            endDate,
            dateSelectorVisible:false,
        })
    }

    /**
     * 取消日期的选择
     */
    onCancelDateSelect = () => {
        this.setState({
            dateSelectorVisible:false,
        })
    }

    getWeekName = (date) => {
        const weekday = moment(date).weekday();
        switch (weekday) {
            case 0:
                return '周日';
            case 1:
                return '周一';
            case 2:
                return '周二';
            case 3:
                return '周三';
            case 4:
                return '周四';
            case 5:
                return '周五';
            case 6:
                return '周六';
        }
    }

    /**
     * 返回上个页面
     */
    goBack = () => {
        this.props.history.goBack(-1);
    }

    render() {
        const {lessonList, dateSelectorVisible, startDate, endDate} = this.state;
        return (
            <>
                <NavBar
                    mode="light"
                    icon={<Icon type="left" onClick={this.goBack}/>}
                    onLeftClick={() => console.log('onLeftClick')}
                >
                    <span className={styles.time} onClick={this.onSelectDate}>
                        {`<${moment(startDate).format("YYYY-MM-DD")} 至 ${moment(endDate).format("YYYY-MM-DD")}>`}
                    </span>
                </NavBar>
                <div>
                    <WingBlank>
                        {lessonList && lessonList.map(lesson => {
                            return <>
                                <WhiteSpace/>
                                <Card key={lesson.id}>
                                    <Card.Header
                                        title={<span>
                                            {`${moment(lesson.timeFrom).format('YYYY-MM-DD HH:mm')} ~ ${moment(lesson.timeTo).format("HH:mm")}`}
                                        </span>}
                                        extra={<div>
                                            <div style={{float: 'left'}}>
                                                <span className={styles.week}>{this.getWeekName(lesson.timeFrom)}</span>
                                                <span className={styles.subject}>
                                                    {this.getSubjectName(lesson.subject)}
                                                </span>
                                            </div>
                                            <span> {lesson.className}</span>
                                        </div>}
                                    />
                                </Card>
                            </>
                        })}
                        {(!lessonList || lessonList.length <= 0) && <div className={styles.empty}>
                            该时间段没有课程安排
                        </div>}
                    </WingBlank>
                    <Calendar
                        showShortcut
                        visible={dateSelectorVisible}
                        onCancel={this.onCancelDateSelect}
                        onConfirm={this.onConfirmDate}
                        onSelectHasDisableDate={this.onSelectHasDisableDate}
                        getDateExtra={this.getDateExtra}
                        defaultDate={now}
                        // minDate={new Date(+now - 5184000000)}
                        // maxDate={new Date(+now + 31536000000)}
                    />
                </div>
            </>
        );
    }
}
